<template>
  <div class="newbody"></div>
  <div v-show="isnone" class="newbodynone"></div>
  <div class="body">
    <div class="navigation-outer" v-show="isNavVisible">
      <div class="navigation-in">
        <div class="navigation-log">
          <a href="#"><img src="./assets/img//log.png" alt=""></a>
        </div>
        <div class="navigation-content">
          <RouterLink :to="item.router" class="router" v-for="item in navlinks" :style="item.status ? navTrue : ''"
            @click="listActive(item.id)">{{
              item.name }}</RouterLink>
        </div>
        <div class="navigation-img2">
          <a href="#"><img src="./assets/img//zhishiku.png" alt=""></a>
        </div>
        <div class="navigation-input" :class="{ divborderbule: !buttonnone }">
          <input type="#" placeholder="探索稀土掘金" class="input1">
          <div>
            <span class="iconfont icon-sousuo"></span>
          </div>
        </div>
        <div class="navigation-button1" v-show="buttonnone">
          <a href="#">
            <button>创作者中心</button>
            <div>
              <span class="iconfont icon-sousuo"></span>
            </div>
          </a>
        </div>
        <div class="vip1">
          <a href="#">
            <img src="./assets/img/vip.png" alt="">
            <span>会员</span>
          </a>
        </div>
        <div class="navigation-button2">
          <button>
            <div>登入</div>
            <div>|</div>
            <div>注册</div>
          </button>
        </div>
      </div>
    </div>

    <div class="content-in">
      <el-config-provider :locale="zhCn">
        <RouterView />
      </el-config-provider>
    </div>

  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref, reactive, watch } from 'vue';
import { RouterLink, RouterView, useRoute } from 'vue-router';
import { ElConfigProvider } from 'element-plus';
import zhCn from 'element-plus/es/locale/lang/zh-cn';
import { getnavlinks } from './util/getapi';
import type { navlinksType } from './util/data';

const route = useRoute();
const navlinks = ref<navlinksType>([]);
const isNavVisible = ref(true);
const navTrue = reactive({ color: '#1e80ff' });
const isnone = ref(false);
const buttonnone = ref(true);

const listActive = (row: number) => {
  navlinks.value.forEach((item) => {
    item.status = false;
    if (row === item.id) {
      item.status = true;
    }
  });
};

const toggleButtonNone = () => {
  buttonnone.value = !buttonnone.value;
};

function handleScroll() {
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  isNavVisible.value = scrollTop < 500;
}

watch(route, (to) => {
  isnone.value = to.path === '/bot';
});

onMounted(() => {
  window.addEventListener('scroll', handleScroll);
  const inputElement = document.querySelector('.input1');
  if (inputElement) {
    inputElement.addEventListener('focus', toggleButtonNone);
    inputElement.addEventListener('blur', toggleButtonNone);
  }

  getnavlinks().then((navlinksget) => {
    if (navlinksget) {
      navlinks.value = navlinksget;
    }
  });
});

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
  const inputElement = document.querySelector('.input1');
  if (inputElement) {
    inputElement.removeEventListener('focus', toggleButtonNone);
    inputElement.removeEventListener('blur', toggleButtonNone);
  }
});
</script>

<style scoped lang="scss">
@import url(./assets/navigation.scss);

.divborderbule {
  border: 1px solid #1e80ff;

  &:hover {
    border: 1px solid #1e80ff;
  }
}
</style>